<template>
    <div class="app-view">
        <div class="homeProjectView" :style="{'height': (tableH - 25) + 'px'}" v-loading="loading">
            <div style="text-align:center">
                <div style="display:flex;margin-bottom:12px;justify-content:space-between">
                    <div class="tableToolbar">
                        <div style="min-width: 90px; margin-block: auto;" class="tableToolbarText">任务名称/编号：</div>
                        <el-input v-model="searchName" size="mini" placeholder="请输入任务名称/编号" clearable class="tableToolbarTextL" style="width: 160px;" @change="getData(0)" />
                        <div style="min-width: 70px; margin-block: auto;" class="tableToolbarText tableToolbarTextL">项目名称：</div>
                        <el-select v-model="prjData" class="tableToolbarTextL" size="mini" placeholder="请选择" clearable style="min-width: 70px;width:12%" @change="getData(0)">
                            <el-option v-for="item in allPrjList" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <div style="min-width: 70px; margin-block: auto;" class="tableToolbarText tableToolbarTextL">试验类型：</div>
                        <el-select v-model="testType" class="tableToolbarTextL" size="mini" placeholder="请选择" clearable style="min-width: 70px;width:12%" @change="getData(0)">
                            <el-option v-for="item in template.taskTypeOption" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                        <el-button type="primary" size="mini" class="tableToolbarTextL" @click="getData(0)">查询</el-button>
                    </div>
                    <div>
                        <span :class="[loading ? 'refreshing' : '','marginL10']">
                            <i :class="['iconfont', 'newIcon', 'icon-new-shuaxin']" @click="getData(0)" />
                        </span>
                    </div>
                </div>
                <el-table :data="tableData"
                          border
                          stripe
                          style="width: 100%"
                          :cell-style="{'text-align':'center'}"
                          :header-cell-style="{'text-align':'center',fontweight:800,fontSize:'14px',color:'black'}"
                          @row-click="handleCellClick">
                    <el-table-column type="index"
                                     class-name="rowStyle"
                                     width="60"
                                     label="序号">
                    </el-table-column>

                    <el-table-column prop="taskCode"
                                     label="任务编号"
                                     class-name="rowStyle">
                    </el-table-column>
                    <el-table-column prop="taskName"
                                     class-name="rowStyle"
                                     label="任务名称">
                    </el-table-column>
                    <el-table-column label="试验类型"
                                     class-name="rowStyle">
                        <template slot-scope="scope">
                            {{ format(template.taskTypeOption, scope.row.testType) }}
                        </template>
                    </el-table-column>
                    <el-table-column class-name="rowStyle"
                                     label="所属项目">
                        <template slot-scope="scope">
                            {{ format(allPrjList, scope.row.prjID) }}
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间"
                                     class-name="rowStyle">
                        <template slot-scope="scope">
                            {{ toDate(scope.row.createTime) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div style="text-align:end">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-sizes="[50, 80]"
                           background
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totals">
            </el-pagination>
        </div>
        <!--<vxe-grid id="xGrid"
              :loading="loading"
              ref="xGrid"
              border
              resizable
              show-overflow
              keep-source
              highlight-hover-row
              :height="tableH"
              align="center"
              :print-config="{}"
              :import-config="{}"
              :export-config="{}"
              :custom-config="{storage: true}"
              :toolbar-config="tableToolbar"
              :columns="tableColumn"
              :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
              :pager-config="tablePage"
              :data="tableData"
              @cell-click="handleCellClick"
              @page-change="handlePageChange">
        <template v-slot:toolbar_buttons>
            <div class="tableToolbar">
                <div style="min-width: 70px; margin-block: auto;" class="tableToolbarText">任务名称：</div>
                <el-input v-model="searchName" size="mini" placeholder="请输入任务名查询" clearable class="tableToolbarTextL" style="width: 160px;" @change="getData(0)" />
                <div style="min-width: 70px; margin-block: auto;" class="tableToolbarText tableToolbarTextL">项目名称：</div>
                <el-select v-model="prjData" class="tableToolbarTextL" size="mini" placeholder="请选择" clearable style="min-width: 70px;width:12%" @change="getData(0)">
                    <el-option v-for="item in allPrjList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div style="min-width: 70px; margin-block: auto;" class="tableToolbarText tableToolbarTextL">试验类型：</div>
                <el-select v-model="testType" class="tableToolbarTextL" size="mini" placeholder="请选择" clearable style="min-width: 70px;width:12%" @change="getData(0)">
                    <el-option v-for="item in template.taskTypeOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" size="mini" class="tableToolbarTextL" @click="getData(0)">查询</el-button>
            </div>
        </template>
    </vxe-grid>-->
    </div>

</template>
<script>
    import prjAPI from '../../request/Project/PrjAPI.js';
    import baseAPI from '../../request/Base/BaseAPI.js';
    import template from '../../common/json/template.js';
    export default {
        components: {

        },
        name: 'Home',
        data() {
            return {
                template,
                searchName: '',
                prjData: null,
                testType:null,
                loading: false,
                tableH: window.innerHeight - topBarHeight - 80,
                allPrjList: [],
                tableColumn: [
                    { type: 'seq', title: '序号', width: 60, fixed: 'left' },
                    { field: 'taskCode', title: '任务编号', fixed: 'left', minWidth: 120 },
                    { field: 'taskName', title: '任务名称', fixed: 'left', minWidth: 200 },
                    { field: 'testType', title: '试验类型', fixed: 'left', minWidth: 100, formatter: ({ row }) => { return this.format(template.taskTypeOption, row.testType) } },
                    { field: 'prjID', title: '所属项目', fixed: 'left', minWidth: 200, formatter: ({ row }) => { return this.format(this.allPrjList, row.prjID) } },
                    { field: 'createTime', title: '创建时间', width: 120, formatter: ({ row }) => { return this.toDate(row.createTime) } },
                    { field: 'createUID', title: '创建人', width: 130, formatter: ({ row }) => { return this.getUser(row.createUID) } },
                ],
                tableToolbar: {
                    refresh: {
                        query: () => this.getData()
                    },
                    import: false,
                    export: false,
                    print: false,
                    custom: false,
                    slots: {
                        buttons: 'toolbar_buttons'
                    }
                },
                tablePage: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 50,
                    align: 'right',
                    pageSizes: [50, 80],
                    layouts: ['Sizes', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
                    perfect: true
                },
                tableData: [],
                currentPage: 1,
                pageSize: 50,
                totals:0,
            }
        },
        async mounted() {
            this.loading = true;
            await this.getAllPrj();
            await this.getAllCustomers();
            this.getData(0);
        },
        methods: {
            getAllCustomers() {
                return new Promise((resolve, reject) => {
                    this.positionOption = [];
                    baseAPI.getAllCustomer().then(res => {

                        this.customers = res.map(x => {
                            return { label: x.customerName, value: x.customerID }
                        });
                        resolve();
                    }).catch(() => {
                        resolve();
                    });
                });
            },
            // 获取所有项目
            getAllPrj() {
                return new Promise((resolve, reject) => {
                    this.positionOption = [];
                    prjAPI.getAllPrj().then(res => {
                        
                        this.allPrjList = res.map(x => {
                            return { label: x.prjName, value: x.prjID, customerID: x.customerID }
                        });
                        resolve();
                    }).catch(() => {
                        resolve();
                    });
                });
            },
            getData(type) { // 获取任务列表
                if (type === 0) {
                    this.currentPage = 1;
                };
                this.loading = true;
                var whereStr = "isDelete = 0 ";

                if (!!this.searchName) {
                    whereStr += " and (taskName like '%" + this.searchName.trim() + "%' ";
                    whereStr += " or taskCode like '%" + this.searchName.trim() + "%') ";
                };
                if (!!this.prjData) {
                    whereStr += " and prjID=" + this.prjData;
                };
                if (!!this.testType) {
                    whereStr += " and testType=" + this.testType;
                };
                prjAPI.getMyTaskList({
                    pageIndex: this.currentPage - 1,
                    pageSize: this.pageSize,
                    where: whereStr
                }).then(res => {
                    this.tableData = res.result;
                    this.totals = res.recordCount;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getData();
            },
            //handleSizeChange( currentPage, pageSize ) {
            //    this.tablePage.currentPage = currentPage;
            //    this.tablePage.pageSize = pageSize;
            //    this.getData();
            //},
            handleCellClick( row, column ) {
                var prjInfo = this.allPrjList.find(x => x.value === row.prjID);
                var customInfo = this.customers.find(x => x.value === prjInfo.customerID);
                row.prjName = prjInfo.label;
                customInfo ? row.customerName = customInfo.label : '';
                let routeUrl = this.$router.resolve({ name: 'TaskDetails', query: { taskInfo: JSON.stringify(row), } });
                window.open(routeUrl.href, routeUrl.href);
            },
            format(ops, op, hasops) {
                var val = null;
                if (hasops) {
                    var options = ops.map(e => {
                        return e.options;
                    }).flat().valueOf();
                    val = options.find(e => e.value === op);
                } else {
                    val = ops.find(e => e.value === op);
                }
                return val ? val.label : '';
            },
            toDate(date) {
                return date ? moment(date).format("YYYY-MM-DD") : "";
            },
            getUser(date) {
                return date ? JSON.parse(sessionStorage.getItem('userList')).find(x => x.userid === date).realname : '';
            },
        },
        template: '#template'
    }
</script>
<style scoped>
</style>